import React , { useState }from 'react';
import { Form, Input, Switch, Button, Space, Divider, message  } from 'antd';
import { LockOutlined, MobileOutlined, SafetyOutlined } from '@ant-design/icons';
import { updatePassword } from '../../../../apis/public/user'; //更新密码的API接口
import { useNavigate } from 'react-router-dom';
import { loginStore } from '../../../../store/public/loginStore';

const SecuritySettings: React.FC = () => {

  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 密码强度校验函数
  const validatePassword = (_, value) => {
    if (!value) return Promise.reject('请输入密码');
    if (value.length < 8) return Promise.reject('密码至少8位');
    if (!/[A-Z]/.test(value)) return Promise.reject('必须包含大写字母');
    if (!/[a-z]/.test(value)) return Promise.reject('必须包含小写字母');
    if (!/[0-9]/.test(value)) return Promise.reject('必须包含数字');
    return Promise.resolve();
  };

  // 确认密码校验
  const validateConfirm = ({ getFieldValue }) => ({
    validator(_, value) {
      if (!value || getFieldValue('newPassword') === value) {
        return Promise.resolve();
      }
      return Promise.reject('两次输入的密码不一致');
    },
  });

  // 提交处理
  const handleSubmit = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      const response = await updatePassword({
        oldPassword: values.currentPassword,
        password: values.newPassword
      });
      form.resetFields(); // 清空表单
      message.success('密码更新成功，请重新登录');
      if((response as any)?.status){
          loginStore.logout();
          navigate('/login');
      }
    } catch (error) {
      message.error('当前密码错误，请重新输入');
    } finally {
      setLoading(false);
    }
  };


  return (
    <div style={{ padding: '20px' }}>
      <Form form={form} layout="vertical">
        {/* 修改密码部分 */}
        <Form.Item label="修改密码" required>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Form.Item
              name="currentPassword"
              rules={[{ required: true, message: '请输入当前密码' }]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="当前密码"
              />
            </Form.Item>

            <Form.Item
              name="newPassword"
              rules={[
                { required: true, message: '请输入新密码' },
                { validator: validatePassword }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="新密码（至少8位，含大小写字母和数字）"
              />
            </Form.Item>

            <Form.Item
              name="confirmPassword"
              dependencies={['newPassword']}
              rules={[
                { required: true, message: '请确认新密码' },
                validateConfirm
              ]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="确认新密码"
              />
            </Form.Item>

            <Button 
              type="primary" 
              onClick={handleSubmit}
              loading={loading}
              disabled={loading}
            >
              更新密码
            </Button>
          </Space>
        </Form.Item>

        <Divider />

        {/* <Form.Item label="两步验证" extra="开启后，登录时需要输入手机验证码">
          <Switch  />
        </Form.Item>

        <Form.Item label="绑定手机" extra="用于接收验证码和重要通知">
          <Space>
            <Input  prefix={<MobileOutlined />} placeholder="请输入手机号" />
            <Button>获取验证码</Button>
          </Space>
        </Form.Item> */}

        <Divider />

        {/* <Form.Item label="登录设备管理" extra="查看并管理已登录的设备">
          <Button  icon={<SafetyOutlined />}>查看设备</Button>
        </Form.Item> */}
      </Form>
    </div>
  );
};

export default SecuritySettings; 